@className: video;
@color:#fd7109;

.@{className}{
  width: 100%;
  background-color: #eee;
  &__swiper-container{
    width: 96%;
     border-radius: 15px;
      overflow: hidden;
      height: 350px;
      margin: 16px 2%;
      &-list{
        width: 100%;
        height: 350px;
      }
  }
  &__videos-container{
    width: 96%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px 2%;
    &-card{
      width: 49%;
      height: 320px;
      display: flex;
      border: 1px solid #f9f9f9;
      box-sizing: border-box;
      flex-direction: column;
      margin-bottom: 16px;
      overflow: hidden; 
      border-radius: 15px;
      background-color: #fff;
      &-img{
        width: 100%;
        position: relative;
        flex: 2;
        margin-bottom: 10px;
        &-picture{
          width: 100%;
        &::before{
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 98%;
        background-color: rgba(0, 0, 0, 0.3);
      }
        }
        &-count{
          position: absolute;
          left: 9px;
          bottom: 15px;
          display: flex;
          align-items:center; 
          // justify-content: space-between;
          font-size: 32px;
          color: #eee;
          &-text{
            margin-left: 5px;
          }
        }
        &-time{
          position: absolute;
          right: 9px;
          bottom: 20px;
          font-size: 32px;
          color: #eee;
        }
      }
     
      &-content{
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        // padding-right: 12px;
        padding-bottom: 10px;
        font-size: 30px;
        &-desc{
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &-from{
          width: 92%;
          display: flex;
          // margin-right: 10px;
          margin-top: 15px;
          justify-content: space-between;
          align-items: center;
          font-size: 25px;
          color: #999;
        }
      }
    }
  }
}